<template><div><h2 id="js组件" tabindex="-1"><a class="header-anchor" href="#js组件"><span>JS组件</span></a></h2>
<p><code v-pre>Dcat Admin</code>内置了一些常用的JS功能组件，通过全局变量<code v-pre>Dcat</code>可以访问到这些功能方法。</p>
<h2 id="监听js脚本加载完毕事件-ready" tabindex="-1"><a class="header-anchor" href="#监听js脚本加载完毕事件-ready"><span>监听JS脚本加载完毕事件 (ready)</span></a></h2>
<p>通过<code v-pre>Dcat.ready</code>方法设置的回调函数会在所有的<code v-pre>JS</code>脚本都加载完毕后执行。</p>
<blockquote>
<p>只有在模板文件中写<code v-pre>JS</code>代码才需要使用<code v-pre>Dcat.ready</code>，当在<code v-pre>php</code>代码中使用<code v-pre>Dcat\Admin\Admin::script</code>方法添加<code v-pre>JS</code>代码时是不需要使用<code v-pre>Dcat.ready</code>方法的。因为在构建页面的时候系统会自动把代码放在<code v-pre>Dcat.ready</code>事件内执行。</p>
</blockquote>
<div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html" data-title="html"><pre v-pre class="language-html"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line">Dcat<span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 写你的逻辑</span></span>
<span class="line"></span>
<span class="line">    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'所有JS脚本都加载完了'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="动态监听元素生成-init" tabindex="-1"><a class="header-anchor" href="#动态监听元素生成-init"><span>动态监听元素生成 (init)</span></a></h2>
<p>通过<code v-pre>Dcat.init</code>可以监听动态生成的页面元素并设置一个回调，下面来举一个简单的例子来演示用法：</p>
<p>假如一个元素是<code v-pre>JS</code>动态生成的，如果我们需要对这个元素绑定一个点击事件的话，那么我们通常需要这么做</p>
<div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html" data-title="html"><pre v-pre class="language-html"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selector<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line">Dcat<span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 需要先 off 再 on 否则页面刷新后会造成重复绑定问题</span></span>
<span class="line">    <span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">off</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'.selector'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'.selector'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token operator">...</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>上面这种做法一来比较麻烦，需要先<code v-pre>off</code>再<code v-pre>on</code>；二来无法对动态生成的元素做一些特殊处理，例如你想在<code v-pre>.selector</code>生成后改变背景颜色，这个操作就没办法做到。</p>
<p>在<code v-pre>Dcat Admin</code>中我们可以使用<code v-pre>Dcat.init</code>方法来监听元素动态生成，可以很方便的解决上面两个问题</p>
<div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html" data-title="html"><pre v-pre class="language-html"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selector<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>test<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line">Dcat<span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// $this 是当前元素的jquery dom对象</span></span>
<span class="line">    <span class="token comment">// id 是当前元素的id属性，如果当前元素没有id则会自动生成一个随机id</span></span>
<span class="line">    Dcat<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token string">'.selector'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">$<span class="token keyword">this</span><span class="token punctuation">,</span> id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 修改元素的背景色</span></span>
<span class="line">        $<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token string">"#fff"</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 这里不需要 off 再重新 on，因为这个匿名函数只会执行一次</span></span>
<span class="line">        $<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token operator">...</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>Dcat.init</code> 接受两个参数</p>
<ol>
<li><code v-pre>selector</code> 需要监听的元素的<code v-pre>css选择器</code></li>
<li><code v-pre>callback</code> 事件回调，当元素生成时触发，且只触发一次</li>
</ol>
<p>其中<code v-pre>callback</code>回调接收两个参数如下</p>
<ul>
<li><code v-pre>$this</code> 是当前元素的jquery dom对象</li>
<li><code v-pre>id</code> 是当前元素的id属性，如果当前元素没有id则会自动生成一个随机id</li>
</ul>
<h2 id="手动触发js脚本加载完毕事件" tabindex="-1"><a class="header-anchor" href="#手动触发js脚本加载完毕事件"><span>手动触发JS脚本加载完毕事件</span></a></h2>
<p>通过<code v-pre>Dcat.triggerReady</code>方法可以手动触发<code v-pre>JS</code>脚本加载完毕事件，这就意味着会自动执行在此之前所有通过<code v-pre>Dcat.ready</code>方法设置的回调函数。</p>
<blockquote>
<p>{tip} 这个功能普通开发很少会用到，只有一些比较深度的组件定制会用到，比如<a href="https://learnku.com/docs/dcat-admin/2.x/js-component/model-form-modal.md" target="_blank" rel="noopener noreferrer">表单弹窗</a>功能就用到了此方法。</p>
</blockquote>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line">Dcat<span class="token punctuation">.</span><span class="token function">triggerReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="pjax刷新页面" tabindex="-1"><a class="header-anchor" href="#pjax刷新页面"><span>Pjax刷新页面</span></a></h2>
<p>通过<code v-pre>Dcat.reload</code>方法可以调用<code v-pre>Pjax.reload</code>方法实现页面刷新和跳转功能。</p>
<p>刷新当前页面</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">script</span><span class="token punctuation">(</span></span>
<span class="line"><span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line">    <span class="token comment">// 3秒后刷新当前页面</span></span>
<span class="line">    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        Dcat<span class="token operator">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token constant">JS</span></span>
<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>跳转页面</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$url</span> <span class="token operator">=</span> <span class="token function">admin_url</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'auth/users'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">Admin</span><span class="token operator">::</span><span class="token function">script</span><span class="token punctuation">(</span></span>
<span class="line"><span class="token operator">&lt;&lt;</span><span class="token operator">&lt;</span><span class="token constant">JS</span></span>
<span class="line">    <span class="token comment">// 3秒后跳转到 admin/auth/users 页面</span></span>
<span class="line">    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        Dcat<span class="token operator">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'{$url}'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token constant">JS</span></span>
<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="toastr提示框" tabindex="-1"><a class="header-anchor" href="#toastr提示框"><span>Toastr提示框</span></a></h2>
<p><code v-pre>Dcat Admin</code>集成了<a href="https://github.com/CodeSeven/toastr" target="_blank" rel="noopener noreferrer">Toastr</a>插件，下面是使用方法</p>
<h3 id="success" tabindex="-1"><a class="header-anchor" href="#success"><span>success</span></a></h3>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line">Dcat<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">'更新成功'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 使用标题</span></span>
<span class="line">Dcat<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">'更新成功'</span><span class="token punctuation">,</span> <span class="token string">'我是标题'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 传递参数</span></span>
<span class="line">Dcat<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">'更新成功'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">timeOut</span><span class="token operator">:</span> <span class="token number">5000</span><span class="token punctuation">,</span> <span class="token comment">// 5秒后自动消失</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><img src="@source/dcat-admin-2x/assets/images/bae5e93b-e8d5-446a-8321-2afe8991ffa1-zmB4EPhS3u.png" alt=""></p>
<h3 id="error" tabindex="-1"><a class="header-anchor" href="#error"><span>error</span></a></h3>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line">Dcat<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'服务器出现未知错误'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 使用标题</span></span>
<span class="line">Dcat<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'服务器出现未知错误'</span><span class="token punctuation">,</span> <span class="token string">'我是标题'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 传递参数</span></span>
<span class="line">Dcat<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'服务器出现未知错误'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">timeOut</span><span class="token operator">:</span> <span class="token number">5000</span><span class="token punctuation">,</span> <span class="token comment">// 5秒后自动消失</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="warning" tabindex="-1"><a class="header-anchor" href="#warning"><span>warning</span></a></h3>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line">Dcat<span class="token punctuation">.</span><span class="token function">warning</span><span class="token punctuation">(</span><span class="token string">'警告'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 使用标题</span></span>
<span class="line">Dcat<span class="token punctuation">.</span><span class="token function">warning</span><span class="token punctuation">(</span><span class="token string">'警告'</span><span class="token punctuation">,</span> <span class="token string">'我是标题'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 传递参数</span></span>
<span class="line">Dcat<span class="token punctuation">.</span><span class="token function">warning</span><span class="token punctuation">(</span><span class="token string">'警告'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">timeOut</span><span class="token operator">:</span> <span class="token number">5000</span><span class="token punctuation">,</span> <span class="token comment">// 5秒后自动消失</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="info" tabindex="-1"><a class="header-anchor" href="#info"><span>info</span></a></h3>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line">Dcat<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string">'提示信息'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 使用标题</span></span>
<span class="line">Dcat<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string">'提示信息'</span><span class="token punctuation">,</span> <span class="token string">'我是标题'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 传递参数</span></span>
<span class="line">Dcat<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string">'提示信息'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">timeOut</span><span class="token operator">:</span> <span class="token number">5000</span><span class="token punctuation">,</span> <span class="token comment">// 5秒后自动消失</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>更多用法请参考<a href="https://github.com/CodeSeven/toastr" target="_blank" rel="noopener noreferrer">toastr官方文档</a></p>
<h2 id="sweetalert2弹窗" tabindex="-1"><a class="header-anchor" href="#sweetalert2弹窗"><span>sweetalert2弹窗</span></a></h2>
<p><code v-pre>Dcat Admin</code>集成了<a href="https://github.com/sweetalert2/sweetalert2" target="_blank" rel="noopener noreferrer">sweetalert2</a>插件，下面是使用方法</p>
<h3 id="confirm" tabindex="-1"><a class="header-anchor" href="#confirm"><span>confirm</span></a></h3>
<p>通过<code v-pre>Dcat.confirm</code>方法可以弹出确认弹窗，此方法接收5个参数</p>
<ul>
<li><code v-pre>title</code> <code v-pre>string</code> 确认信息标题</li>
<li><code v-pre>message</code> <code v-pre>string</code> 确认信息内容，此参数可以不传</li>
<li><code v-pre>success</code> <code v-pre>function</code> 点击确认按钮触发的回调函数</li>
<li><code v-pre>fail</code> <code v-pre>function</code> 点击取消按钮触发的回调函数，此参数可以不传</li>
<li><code v-pre>options</code> <code v-pre>object</code> 配置参数，可参考<a href="https://github.com/sweetalert2/sweetalert2" target="_blank" rel="noopener noreferrer">sweetalert2官方文档</a></li>
</ul>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line">Dcat<span class="token punctuation">.</span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">'确认要删除这行数据吗？'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'确认删除'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    $<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><img src="@source/dcat-admin-2x/assets/images/85c7b8d9-0c2c-44d7-8ce1-493b674fe61d-lp40C74OtV.png" alt=""></p>
<h3 id="success-1" tabindex="-1"><a class="header-anchor" href="#success-1"><span>success</span></a></h3>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line">Dcat<span class="token punctuation">.</span>swal<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">'标题'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">Dcat<span class="token punctuation">.</span>swal<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">'标题'</span><span class="token punctuation">,</span> <span class="token string">'内容'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">Dcat<span class="token punctuation">.</span>swal<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">'标题'</span><span class="token punctuation">,</span> <span class="token string">'内容'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><img src="@source/dcat-admin-2x/assets/images/79c1ada7-f308-4cc6-b93d-6d72ac11abfd-OrhZ4dvA5R.png" alt=""></p>
<h3 id="error-1" tabindex="-1"><a class="header-anchor" href="#error-1"><span>error</span></a></h3>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line">Dcat<span class="token punctuation">.</span>swal<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'标题'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">Dcat<span class="token punctuation">.</span>swal<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'标题'</span><span class="token punctuation">,</span> <span class="token string">'内容'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">Dcat<span class="token punctuation">.</span>swal<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'标题'</span><span class="token punctuation">,</span> <span class="token string">'内容'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><img src="@source/dcat-admin-2x/assets/images/dede1dcd-84a9-4e7a-97b4-7445cc90aa48-lnp47PDecK.png" alt=""></p>
<h3 id="warning-1" tabindex="-1"><a class="header-anchor" href="#warning-1"><span>warning</span></a></h3>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line">Dcat<span class="token punctuation">.</span>swal<span class="token punctuation">.</span><span class="token function">warning</span><span class="token punctuation">(</span><span class="token string">'标题'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">Dcat<span class="token punctuation">.</span>swal<span class="token punctuation">.</span><span class="token function">warning</span><span class="token punctuation">(</span><span class="token string">'标题'</span><span class="token punctuation">,</span> <span class="token string">'内容'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">Dcat<span class="token punctuation">.</span>swal<span class="token punctuation">.</span><span class="token function">warning</span><span class="token punctuation">(</span><span class="token string">'标题'</span><span class="token punctuation">,</span> <span class="token string">'内容'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="info-1" tabindex="-1"><a class="header-anchor" href="#info-1"><span>info</span></a></h3>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line">Dcat<span class="token punctuation">.</span>swal<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string">'标题'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">Dcat<span class="token punctuation">.</span>swal<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string">'标题'</span><span class="token punctuation">,</span> <span class="token string">'内容'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">Dcat<span class="token punctuation">.</span>swal<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string">'标题'</span><span class="token punctuation">,</span> <span class="token string">'内容'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>更多用法请参考<a href="https://github.com/sweetalert2/sweetalert2" target="_blank" rel="noopener noreferrer">sweetalert2官方文档</a></p>
<h2 id="layer弹出层" tabindex="-1"><a class="header-anchor" href="#layer弹出层"><span>layer弹出层</span></a></h2>
<p><code v-pre>Dcat Admin</code>集成了<a href="http://layer.layui.com/" target="_blank" rel="noopener noreferrer">layer弹出层</a>，用法请参考官方文档</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line">layer<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token operator">...</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="loading效果" tabindex="-1"><a class="header-anchor" href="#loading效果"><span>Loading效果</span></a></h2>
<p><code v-pre>Dcat Admin</code>集成了三种常见的loading效果，<a href="http://103.39.211.179:8080/admin/components/loading" target="_blank" rel="noopener noreferrer">在线体验点我</a></p>
<h3 id="全屏" tabindex="-1"><a class="header-anchor" href="#全屏"><span>全屏</span></a></h3>
<p>通过<code v-pre>Dcat.loading</code>方法可以设置一个占满全屏幕的遮罩层，并在中间位置显示<code v-pre>loading</code>图标。</p>
<p>此方法接收一个<code v-pre>object</code>类型的参数：</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>zIndex</td>
<td><code v-pre>int</code></td>
<td>999991014</td>
<td>设置css的z-index(层重叠顺序)样式</td>
</tr>
<tr>
<td>width</td>
<td><code v-pre>string</code></td>
<td>58px</td>
<td>设置loading图标宽度</td>
</tr>
<tr>
<td>color</td>
<td><code v-pre>string</code></td>
<td>#bacad6</td>
<td>设置loading图标的颜色</td>
</tr>
<tr>
<td>background</td>
<td><code v-pre>string</code></td>
<td>transparent</td>
<td>设置遮罩层背景颜色</td>
</tr>
<tr>
<td>style</td>
<td><code v-pre>string</code></td>
<td></td>
<td>设置loading图标的css样式</td>
</tr>
</tbody>
</table>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token comment">// 开启loading效果</span></span>
<span class="line">Dcat<span class="token punctuation">.</span><span class="token function">loading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 3秒后自动移除loading效果</span></span>
<span class="line"><span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    Dcat<span class="token punctuation">.</span><span class="token function">loading</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果</p>
<p><img src="@source/dcat-admin-2x/assets/images/03c4270f-dd4a-4948-8df9-5207b0babb8a-FIWAUFg1qn.png" alt=""></p>
<p>更改loading图标的颜色</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token comment">// 更改颜色</span></span>
<span class="line">Dcat<span class="token punctuation">.</span><span class="token function">loading</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">color</span><span class="token operator">:</span> Dcat<span class="token punctuation">.</span>color<span class="token punctuation">.</span>primary<span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><img src="@source/dcat-admin-2x/assets/images/d8f83106-354c-498f-bcd8-fc41b0f7e254-WPIC4wwq5Q.png" alt=""></p>
<h3 id="附着于指定元素" tabindex="-1"><a class="header-anchor" href="#附着于指定元素"><span>附着于指定元素</span></a></h3>
<p>通过<code v-pre>$.fn.loading</code>方法可以把loading效果附着于当前元素，此方法同样接收一个<code v-pre>object</code>类型参数：</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>zIndex</td>
<td><code v-pre>int</code></td>
<td>100</td>
<td>设置css的z-index(层重叠顺序)样式</td>
</tr>
<tr>
<td>width</td>
<td><code v-pre>string</code></td>
<td>52px</td>
<td>设置loading图标宽度</td>
</tr>
<tr>
<td>color</td>
<td><code v-pre>string</code></td>
<td>#bacad6</td>
<td>设置loading图标的颜色</td>
</tr>
<tr>
<td>background</td>
<td><code v-pre>string</code></td>
<td>#fff</td>
<td>设置遮罩层背景颜色</td>
</tr>
<tr>
<td>style</td>
<td><code v-pre>string</code></td>
<td></td>
<td>设置loading图标的css样式</td>
</tr>
</tbody>
</table>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token comment">// 开启loading效果</span></span>
<span class="line"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#card'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">loading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 关闭loading效果</span></span>
<span class="line"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#card'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">loading</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 更改loading图标颜色</span></span>
<span class="line"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#card'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">loading</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">color</span><span class="token operator">:</span> Dcat<span class="token punctuation">.</span>color<span class="token punctuation">.</span>primary<span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 更改遮罩层颜色</span></span>
<span class="line"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#card'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">loading</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token string">'#f3f3f3'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果</p>
<p><img src="@source/dcat-admin-2x/assets/images/6333a7f4-cd23-4be1-99d8-c4664e956109-ziHL5feEAV.png" alt=""></p>
<h3 id="按钮" tabindex="-1"><a class="header-anchor" href="#按钮"><span>按钮</span></a></h3>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token comment">// 开启loading效果</span></span>
<span class="line"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#submit-button'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">buttonLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 关闭loading效果</span></span>
<span class="line"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#submit-button'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">buttonLoading</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果<br>
<img src="@source/dcat-admin-2x/assets/images/6c2e0419-96d9-4d95-83f7-f3f16b8df8c4-rNMFWAHPqJ.png" alt=""></p>
<h3 id="a标签" tabindex="-1"><a class="header-anchor" href="#a标签"><span>a标签</span></a></h3>
<p>点击<code v-pre>a</code>标签同样支持loading效果</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token comment">// 开启loading效果</span></span>
<span class="line"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">buttonLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 关闭loading效果</span></span>
<span class="line"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">buttonLoading</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果<br>
<img src="@source/dcat-admin-2x/assets/images/37ed7891-ebb8-4e38-8d47-73cbdd977135-IE8kGdupKW.png" alt=""></p>
<h2 id="ajax表单提交" tabindex="-1"><a class="header-anchor" href="#ajax表单提交"><span>Ajax表单提交</span></a></h2>
<p><code v-pre>Dcat Admin</code>集成了<a href="https://github.com/jquery-form/form" target="_blank" rel="noopener noreferrer">jquery-form</a>组件用于实现<code v-pre>ajax</code>提交表单功能。</p>
<p>通过<code v-pre>Dcat.Form</code>方法可以当即发起<code v-pre>ajax</code>提交表单请求，此方法接受一个<code v-pre>object</code>类型参数：</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>form</td>
<td><code v-pre>string</code></td>
<td><code v-pre>object</code></td>
<td>表单的 jquery 对象或者css选择器</td>
</tr>
<tr>
<td>validate</td>
<td><code v-pre>bool</code></td>
<td><code v-pre>false</code></td>
<td>是否开启表单验证，可参考<a href="#validate">表单验证</a></td>
</tr>
<tr>
<td>errorClass</td>
<td><code v-pre>string</code></td>
<td>has-error</td>
<td>字段验证出错时添加的样式，一般使用默认值即可</td>
</tr>
<tr>
<td>errorContainerSelector</td>
<td><code v-pre>string</code></td>
<td>.with-errors</td>
<td>表单错误信息容器css选择器，一般使用默认值即可</td>
</tr>
<tr>
<td>groupSelector</td>
<td><code v-pre>string</code></td>
<td>.form-group,.form-label-group,.form-field</td>
<td>表单组css选择器，一般使用默认值即可</td>
</tr>
<tr>
<td>errorTemplate</td>
<td><code v-pre>string</code></td>
<td></td>
<td>错误信息模板，使用默认值即可</td>
</tr>
<tr>
<td>autoRedirect</td>
<td><code v-pre>bool</code></td>
<td><code v-pre>false</code></td>
<td>保存成功后自动跳转</td>
</tr>
<tr>
<td>autoRemoveError</td>
<td><code v-pre>bool</code></td>
<td>true</td>
<td>当表单值发生变化时自动移除表单错误信息</td>
</tr>
<tr>
<td>before</td>
<td><code v-pre>function</code></td>
<td></td>
<td>表单提交之前事件，返回<code v-pre>false</code>可以阻止表单继续提交</td>
</tr>
<tr>
<td>after</td>
<td><code v-pre>function</code></td>
<td></td>
<td>单提交之后事件(不论成功还是失败都会触发)，返回<code v-pre>false</code>可以中止后续逻辑</td>
</tr>
<tr>
<td>success</td>
<td><code v-pre>function</code></td>
<td></td>
<td>成功事件（接口返回状态码为<code v-pre>200</code>则判断为成功），返回<code v-pre>false</code>可以中止后续逻辑</td>
</tr>
<tr>
<td>error</td>
<td><code v-pre>function</code></td>
<td></td>
<td>失败事件（接口返回状态码非<code v-pre>200</code>则判断为失败），返回<code v-pre>false</code>可以中止后续逻辑</td>
</tr>
</tbody>
</table>
<h3 id="基本用法" tabindex="-1"><a class="header-anchor" href="#基本用法"><span>基本用法</span></a></h3>
<div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html" data-title="html"><pre v-pre class="language-html"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line">Dcat<span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// ajax表单提交</span></span>
<span class="line">    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#login-form'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">form</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">        <span class="token literal-property property">validate</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//开启表单验证</span></span>
<span class="line">        <span class="token function-variable function">before</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">fields<span class="token punctuation">,</span> form<span class="token punctuation">,</span> opt</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// fields 为表单内容</span></span>
<span class="line">            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'所有表单字段的值'</span><span class="token punctuation">,</span> fields<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token comment">// 返回 false 可以阻止表单继续提交</span></span>
<span class="line">                <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// data 为接口返回数据</span></span>
<span class="line">            <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span> response<span class="token punctuation">.</span>status<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                Dcat<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">            Dcat<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>redirect<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                Dcat<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>value<span class="token punctuation">)</span></span>
<span class="line">            <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">            <span class="token comment">// 中止后续逻辑（默认逻辑）</span></span>
<span class="line">            <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token function-variable function">error</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// 当提交表单失败的时候会有默认的处理方法，通常使用默认的方式处理即可</span></span>
<span class="line">            <span class="token keyword">var</span> errorData <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token keyword">if</span> <span class="token punctuation">(</span>errorData<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                Dcat<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>errorData<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span>
<span class="line">                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'提交出错'</span><span class="token punctuation">,</span> response<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">            <span class="token comment">// 终止后续逻辑执行</span></span>
<span class="line">            <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="高阶用法" tabindex="-1"><a class="header-anchor" href="#高阶用法"><span>高阶用法</span></a></h3>
<p>如果你想要实现更细粒度的控制，可以通过类似下面这种方式自己绑定提交按钮，然后提交表单</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token keyword">var</span> $form <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#login-form'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 禁用默认提交</span></span>
<span class="line">$form<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'submit'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// ajax表单提交</span></span>
<span class="line"><span class="token keyword">function</span> <span class="token function">submit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    Dcat<span class="token punctuation">.</span><span class="token function">Form</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">        <span class="token literal-property property">form</span><span class="token operator">:</span> $form<span class="token punctuation">,</span></span>
<span class="line">        <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span> response<span class="token punctuation">.</span>status<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                Dcat<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">                <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">            Dcat<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            location<span class="token punctuation">.</span>href <span class="token operator">=</span> response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>value<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">            <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token function-variable function">error</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// 非200状态码响应错误</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// h5表单验证</span></span>
<span class="line"><span class="token keyword">function</span> <span class="token function">validateForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    $form<span class="token punctuation">.</span><span class="token function">validator</span><span class="token punctuation">(</span><span class="token string">'validate'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 如果出现错误，则返回false</span></span>
<span class="line">    <span class="token keyword">if</span> <span class="token punctuation">(</span>$form<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'.has-error'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 绑定登陆按钮点击事件</span></span>
<span class="line">$form<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'[type="submit"],.submit'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 表单验证</span></span>
<span class="line">    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">validateForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">// 提交表单</span></span>
<span class="line">    <span class="token function">submit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="表单验证" tabindex="-1"><a class="header-anchor" href="#表单验证"><span>表单验证</span></a></h3>
<p><code v-pre>Dcat Admin</code>集成了<a href="https://github.com/1000hz/bootstrap-validator" target="_blank" rel="noopener noreferrer">bootstrap-validator</a>组件用于表单前端验证的功能，<br>
<a href="https://github.com/1000hz/bootstrap-validator" target="_blank" rel="noopener noreferrer">bootstrap-validator</a>是一款支持H5表单验证的验证器，只需把验证规则写在表单元素的属性上即可自动开启验证，非常方便。</p>
<h4 id="添加验证规则" tabindex="-1"><a class="header-anchor" href="#添加验证规则"><span>添加验证规则</span></a></h4>
<div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html" data-title="html"><pre v-pre class="language-html"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>fieldset</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-label-group form-group position-relative has-icon-left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span></span>
<span class="line"></span>
<span class="line">        <span class="token attr-name">minlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token attr-name">&lt;!--</span> <span class="token attr-name">加上验证规则</span> <span class="token attr-name">--</span><span class="token punctuation">></span></span></span>
<span class="line">        maxlength="20" <span class="token comment">&lt;!-- 加上验证规则 --></span></span>
<span class="line">        required  <span class="token comment">&lt;!-- 加上验证规则 --></span></span>
<span class="line">        type="password"</span>
<span class="line">        class="form-control"</span>
<span class="line">        name="password"</span>
<span class="line">    ></span>
<span class="line"></span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-control-position<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feather icon-lock<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span></span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ trans('admin.password') }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line">    <span class="token comment">&lt;!-- 这个加了 .with-errors 样式的 div 即是表单错误信息显示的位置，非常重要 --></span></span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>help-block with-errors<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>fieldset</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="开启表单验证" tabindex="-1"><a class="header-anchor" href="#开启表单验证"><span>开启表单验证</span></a></h4>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#xx-form'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">form</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">validate</span><span class="token operator">:</span> <span class="token boolean">true</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果</p>
<p><img src="@source/dcat-admin-2x/assets/images/aa2d1118-6f1b-496b-805d-b93653c0de16-wJxcYaC9GP.png" alt=""><br>
<img src="@source/dcat-admin-2x/assets/images/9f1f7f90-e326-4013-b102-03d8835c8912-qdXUaNEMSQ.png" alt=""></p>
<h4 id="扩展验证规则" tabindex="-1"><a class="header-anchor" href="#扩展验证规则"><span>扩展验证规则</span></a></h4>
<p>通过<code v-pre>Dcat.validator.extend</code>方法可以扩展表单验证规则</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line">Dcat<span class="token punctuation">.</span>validator<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token string">'maxlength'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">$el</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> $el<span class="token punctuation">.</span><span class="token function">val</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">></span> $el<span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'data-maxlength'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>使用自定义规则验证表单</p>
<div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html" data-title="html"><pre v-pre class="language-html"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> </span>
<span class="line">    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input<span class="token punctuation">"</span></span></span>
<span class="line">    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span></span>
<span class="line">    <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span></span>
<span class="line">    <span class="token attr-name">data-maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span> <span class="token attr-name">&lt;!--</span> <span class="token attr-name">使用刚刚自定义的验证规则</span> <span class="token attr-name">--</span><span class="token punctuation">></span></span></span>
<span class="line">    data-maxlength-error="已超出输入字符长度限制，请输入20个或以下的字符" <span class="token comment">&lt;!-- 定义错误信息 --></span></span>
<span class="line"> /></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="内置验证规则" tabindex="-1"><a class="header-anchor" href="#内置验证规则"><span>内置验证规则</span></a></h4>
<p>更多内置验证规则请参考<a href="http://1000hz.github.io/bootstrap-validator/" target="_blank" rel="noopener noreferrer">bootstrap-validator官方文档</a></p>
</div></template>


